import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Icon, Tools } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';

import Api from '../../apis/setting';
import ViewHtml from './ViewHtml';

const { getLabel } = Tools;

@inject('mailSignStore')
@withRouter
@observer
export default class MailSign extends Component {

  prefixCls = 'mail-sign';

  componentDidMount() {
    const { mailSignStore } = this.props
    const { listViewStore, template } = mailSignStore;
    listViewStore.setState({ template });
    listViewStore.clearData();
    this.getData();
  }

  onRowSelect = (selectRowKeys) => {
    Api.operateUserMailSign({ operation: 'default', defaultSignId: selectRowKeys }).then(res => {
      if (res.flag) {
        this.getData(1);
      }
    });
  }

  onRowClick = (rowData) => {
    const { history, mailSignStore } = this.props;
    const { id, signType, signName, defaultValue } = rowData;
    if (defaultValue) { return; }
    const then = (html) => {
      mailSignStore.setState({
        signName,
        signHtml: html || '',
      });
      history.push('/setting/mailSign/signView');
    }
    if (signType === '1') {
      // 电子签名
      Api.getMailElcSignPreview({ id }).then(res => {
        const { content } = res;
        then(content);
      });
    } else {
      // 文本签名
      Api.getMailSignEntity({ id, signType }).then(res => {
        const { emailSignEntity } = res;
        then(emailSignEntity.signContent);
      });
    }
  }

  getData = (current) => {
    const { mailSignStore } = this.props;
    const { listParams } = mailSignStore;
    mailSignStore.getData(listParams, current);
  }

  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const { id, isDefault, signNamespan, signTypespan, defaultValue } = data;
          return (
            <div className={`${this.prefixCls}-list-item`} key={id}>
              <div className={`${this.prefixCls}-list-item-body`}>
                <div className={`${this.prefixCls}-list-item-body-name`}>
                  {signNamespan}{isDefault === '1' && <span className="default-sign">{getLabel('149','默认')}</span>}
                </div>
                <div className={`${this.prefixCls}-list-item-body-type`}>{signTypespan}</div>
              </div>
              {!defaultValue && <div className={`${this.prefixCls}-list-item-arrow`}>
                <Icon type="right" />
              </div>}
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  render() {
    const { mailSignStore } = this.props;
    const { listViewStore, signName, signHtml } = mailSignStore;
    return (
      <div className={this.prefixCls}>
        <ListViewPage.Normal
          store={listViewStore}
          getDataCustom={true}
          showCheck={true}
          multipleCheck={false}
          getTemplate={this.getTemplate}
          onEndReached={this.getData}
          onRefresh={this.getData}
          onRowSelect={this.onRowSelect}
          onRowClick={this.onRowClick}
        />
        <Route
          key="signView"
          path="/setting/mailSign/signView"
          render={() => (<ViewHtml title={signName} html={signHtml} />)}
        />
      </div>
    );
  }
}